<template>
  <div>
    <el-dialog title="关联项目"
               :visible.sync="dialogVisible"
               width="60%"
               :before-close="handleClose">
      <el-row :gutter="20">
        <el-form :model="requestParam"
                 ref="requestParam">
          <el-col :span="24">
            <el-table :data="requestParam.tableData"
                      height="400"
                      :header-cell-style="{ background: '#f5f5f5' }">
              <el-table-column type="index"
                               fixed
                               align="center"
                               label="序号">
              </el-table-column>
              <el-table-column prop="date"
                               fixed
                               align="center"
                               show-overflow-tooltip
                               label="项目编号">
                <template slot-scope="scope">
                  <p>{{ ("0000" + scope.row.project_id).substr(-5, 5) }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="project_name"
                               align="center"
                               show-overflow-tooltip
                               label="项目名称">
              </el-table-column>
              <el-table-column prop="company_name"
                               align="center"
                               show-overflow-tooltip
                               label="所属单位">
              </el-table-column>
              <el-table-column prop="leader_name"
                               align="center"
                               show-overflow-tooltip
                               label="项目经理">
              </el-table-column>
              <el-table-column width="150px"
                               show-overflow-tooltip
                               align="center"
                               label="是否工业化项目">
                <template slot-scope="scope">
                  {{scope.row.is_indust_project==='1'?'是':'否'}}
                </template>
              </el-table-column>
              <el-table-column prop="created_at"
                               align="center"
                               show-overflow-tooltip
                               label="创建时间">
              </el-table-column>
              <el-table-column label="操作"
                               align="center"
                               fixed="right"
                               width="120px">
                <template slot-scope="scope">
                  <el-button type="text"
                             @click="onDisassociate(scope.row)">取消关联</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24"
                  class="bottom-box">
            <el-button @click="onBack">返回</el-button>
            <el-button type="primary"
                       @click="onSure">确定</el-button>
          </el-col>
        </el-form>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { ProjectListApi } from "@/services/ProjectCenter";
export default {
  props: {
    objRow: {
      type: Object,
      default: () => {
        return {}
      }
    },
    relProLookVisible: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      dialogVisible: false,
      requestParam: {
        tableData: []
      }
    }
  },
  methods: {
    getRelProList () {//获取已关联的项目列表
      ProjectListApi.getRelProList({
        params: {
          project_id: this.objRow.project_id,//项目主键值
          is_page: 0,//不分页
        }
      }).then(
        res => {
          // if (res.code === 0) {
          let list = [];
          list = res.data.list;
          this.requestParam.tableData = list;
          // }
        },
        err => {
          console.log(err);
        }
      );
    },
    onBack () {//返回
      this.dialogVisible = false;
      this.$emit('update:objRow', {})
      this.$emit('update:relProLookVisible', false);
    },
    onSure () {//确定
      this.onBack();//返回
    },
    cancelProRela (row) {//取消关联
      ProjectListApi.cancelProRela({
        data: {
          project_id: row.prp_project_id,//项目的主键值
          project_rela_id: row.prp_project_rela_id,//关联的项目主键值
        }
      }).then((res) => {
        if (res.code == 0) {
          this.getRelProList();//刷新
          this.$message.success('操作成功')
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    onDisassociate (row) {//取消关联
      this.$confirm('确认取消关联?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        left: true
      }).then(() => {
        this.cancelProRela(row);//取消关联
      }).catch(() => {
        this.$message.info('已取消操作')
      });
    },
    handleClose (done) {//弹框关闭
      this.onBack();
      done();
    }
  },
  watch: {//监听
    relProLookVisible (n, o) {
      if (n == true) {
        this.dialogVisible = true;
        this.getRelProList();//获取已关联的项目列表
      }
      console.log('w relProLookVisible=', n, 'objRow=', this.objRow)
    }
  },
  created () {
    if (this.relProLookVisible == true) {
      this.dialogVisible = true;
      this.getRelProList();//获取已关联的项目列表
    }
    console.log('c relProLookVisible=', this.relProLookVisible, 'objRow=', this.objRow)
  }
}
</script>

<style lang="scss" scoped>
.bottom-box {
  margin-top: 24px;
  text-align: center;
}
</style>